{extend name="layouts@base" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/mobile/default/js/Swiper-4.0.7/swiper.min.css" />
<link rel="stylesheet" href="__STATIC__/mobile/default/css/index.css" />
<style>
  img {
    max-width: 100%;
    max-height: 100%;
  }

  .m {
    padding: 10px;
  }

  .girdBox {
    padding-bottom: 0;
  }

  /*.index-header {
    background-color: #e0133c;
  }*/


  #swiper01 {
    border-radius: 0.1rem;
    overflow: hidden;
    margin-bottom: -0.5rem;
    z-index: 100;
  }

  #swiper01 .swiper-slide img {
    height: 1.8rem;
  }

  .gird {
    margin: 0;
    padding-top: 0.4rem;
    z-index: 99;
  }

  .trademark .googslist {
    margin-top: 0;
  }

  .trademark .van-grid-item__content {
    padding: 0;
  }

  .goods {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0.15rem;
    border: 1px solid #ccc;
    overflow: hidden;
    position: relative;
  }
	.goods i{ display: block; position: absolute; top: 0; left: 0; z-index: 99999;  background: url('__STATIC__/images/hot.png')no-repeat center; height: 0.35rem; width: 0.4rem; background-size:100% ; }
	.goodss i{ display: block; position: absolute; top: -0.01rem; left: 0; z-index: 99999;  background: url('__STATIC__/images/ideal.png')no-repeat center; height: 0.6rem; width: 0.6rem; background-size:100% ; }
.goodsss i{ display: block; position: absolute; top: -0.01rem; left: 0; z-index: 99999;  background: url('__STATIC__/images/new.png')no-repeat center; height: 0.6rem; width: 0.6rem; background-size:100% ; }
  .goods-content {
    padding: 0.1rem;
    border-radius: 0 0 0.16rem 0.16rem;
    background-color: #FFF;
  }
    .goodsss img{ height:1.8rem; }
  .van-grid-item__content {
    background-color: transparent;
  }

  #swiper01 .swiper-pagination {
    bottom: 0.3rem;
  }

  .van-multi-ellipsis--l1 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .search-box{ display: flex; background: {$setcolor}; padding-right: 0.6rem; position: relative; }
  .search-box .search-url{ display: block; width: 100%; }
  .van-search{ padding: 0 15px 10px 25px;background:{$setcolor} !important; width: 100%; }
  .search-box span{ display: block; height: 34px; width:34px; line-height: 34px; text-align: center; position: absolute; top: 0; right: 0.2rem; }
  .search-box span img{ width: 82%;  }   
 	.van-field__control{ height: 24px !important; line-height: 24px; }   
 	.van-grid-item__content--surround::after{border: none;}
 	.newmark .van-grid-item{ flex-basis: 100% !important; margin-bottom:15px; }
  	.newmark .van-grid-item .goodss img{ height: 1.8rem; }
  	
  	
  	.trade-box{ display:flex; padding:0 0.05rem; }
  	.trade-box .item{ width:50%; padding:0 0.05rem;  }
  	.trade-box .item  li.last{ padding-top:0.1rem; }
    .van-notice-bar{ margin: 20px auto 0;width:94%; padding-top:5px; height: 40px; border-radius: 10px; }
    .notice-swipe{ height: 30px}
  	.van-swipe-item { width: 100% !important;}
</style>

{/block}
{block name="main" }

<div class="page-bd" id="app" style="display: none;">
  
  <div class="m index-header p-t0">
    <div class="swiper-container swiper1" id="swiper01" style="background:#f2f2f2;">
      <div class="swiper-wrapper">
        {volist name="slideList" id="slide" }
        <a href="{$slide.url}" class="swiper-slide">
        	<img data-src="{$slide.imgurl}" class="swiper-lazy" />
          <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </a>
        {/volist}
      </div>
      <div class="swiper-pagination pagination1"></div>
    </div>
  </div>
  <van-notice-bar left-icon="volume-o" background="#414141" color="#e9cb00" :scrollable="false">
    <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
      <van-swipe-item v-for="(vo,index) in notice" :key = "index" @click="Details(vo.id)">{{vo.title}}</van-swipe-item>
    </van-swipe>
  </van-notice-bar>
  

  <div class="trademark">
    <!-- <img src="__STATIC__/mobile/default/images/loading.svg" data-original="{$cg.cover}" alt="" class="lazy trademarkBG"> -->
    <div class="hot-title flex pt-2 pb-1">
      <div class="flex-item left font-md color_3">星券商品</div>
      <a href="{:url('goods/index',['is_best'=>1])}" class="flex-center"><span class="fs26 color_9">更多</span><img
          src="__STATIC__/mobile/default/images/rightIcon.png" alt="" style="width: 6px;"></a>
    </div>
    <van-grid :gutter="10" :column-num="2">
      {volist name="newGoods" id="goods" }
      <van-grid-item class="goods-item">
        <div class="goods goodss">
        	<i></i>
          <a href="{:url('goods/info',['id'=>$goods['goods_id']])}">
            <img src="__STATIC__/mobile/default/images/loading.svg" data-original="{$goods.goods_thumb}"
              class="lazy goods-pic" alt="">
          </a>
          <div class="goods-content">
            <span class="fs26 color_3 van-multi-ellipsis--l1">{$goods.goods_name}</span>
            <div class="color_r fs20 num">
              <p class="fw_b fm_p">￥<em class="fs30">{$goods.use_integral}</em>
            </div>
            <div class="flex-center line-2">
              <span class="fs20 color_3 flex-item">{$goods.sale_num+$goods.virtual_sale}人付款</span>
              <span class="fs20 color_3 flex-item">库存{$goods.goods_number}</span>
              <a href="{:url('goods/info',['id'=>$goods['goods_id']])}">
                <el-tag size="mini" type="warning">购买</el-tag>
              </a>
            </div>
          </div>
        </div>
      </van-grid-item>
      {/volist}

    </van-grid>
  </div>

</div>
{include file="layouts@bottom" /}
</div>
{/block}
{block name="footer"}
<script src="__STATIC__/mobile/default/js/Swiper-4.0.7/swiper.min.js"></script>
<script src="__STATIC__/built/pages/home.js?t=555"></script>
<script>
  $(function () {
    $('#app').show();
    swiper1 = createSwiper(1);
    swiper2 = createSwiper(2);
    $('.topTips .cell_ft p').on('click', function () {
      $('.model').show()
    })
    $('.topTips .cell_ft img').on('click', function () {
      $('.topTips').hide()
    })
    $('.closeModel').on('click', function () {
      $('.model').hide()
    })
  });

  function createSwiper(index) {
    var swiper = new Swiper(".swiper" + index, {
      pagination: {
        el: ".pagination" + index
      },
      paginationClickable: true,
      observer: true,
      observeParents: true,
      loop: true,
      lazy: { loadPrevNext: true },
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false
      },
      onSlideChangeEnd: function (swiper) {
        swiper.update(); //swiper更新
      }
    });
    return swiper;
  }
</script>
{/block}